<template>
	<view style="padding: 0 20rpx;">
		<view :class="showlist?'waterfall-container u-skeleton':'con'" style="width: 100%;height: 100%;" >
					<!--  v-for="(item,index) in list" -->
					<view @longpress="longclick(item)" :style="{'border-radius':lradius + 'rpx'}" v-for="(item,index) in goodsListIndex" :class="showlist?'waterfall-item shop u-skeleton-fillet':'shop shopwidth u-skeleton-fillet'" :key='index' @click="navto(item)">
						<view class="imgWrap">
						  <image :src="item.firstPicUrl" mode="widthFix"></image>
						</view>
						<view style="display: flex;align-items: center;margin-top: 10rpx;">
							<view class="newmoney">¥{{item.price}}</view>
							<!-- <view class="noldmoney">¥200</view> -->
						</view>
						<view class="name font_1">{{item.name}}</view>
						<!-- <view :class="showlist?'introduction font_3':'introduction font_1'">{{item.detail}}</view> -->
						
						
						<!-- 写入标签 -->
						<!-- <view v-if="true" style="display: flex;align-items: center;justify-content:space-between;margin: 10rpx 0;">
							
							<view class="tab">特级</view>
							<view v-if="showcar" class="addbutton" @click="add(item)">加入购物车</view>
						</view> -->
					</view>
		</view>
			<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	export default {
		name:"goodsListIndex",
		props: {
			goodsListIndex: {
				type: Array
			},
				list:{
				type:Array,
				default:()=>{
					return []
				},
				required:true,
				// 必填list列表
			},
			status:{
				type:Boolean,
				default:true,
				// 是否显示标签栏与购物车
			},
			navurl:{
				type:String,
				default:()=>{
					return ''
				},
				// 代为跳转url
			},
			loading:{
				type:Boolean,
				default:true,
			},
			showcar:{
				type:Boolean,
				default:()=>{
					return true
				},
				// 是否显示购物车按钮
			},
			showlist:{
				type:Boolean,
				default:()=>{
					return true
				},
				// 是否显示瀑布流
			},
			lradius:{
				type:Number,
				default:()=>{
					return 40
				},
				// 模块得圆角
			}
			
		},
		computed:{
			goodsListIndex1:{
				get(){
					console.log('goodsListIndex1里面的get()')
					return this.goodsListIndex;
				},
				set(value){
					console.log('goodsListIndex1被修改了！！！',value)
					//value是被删的数组元素
					// this.goodsListIndex=value
					this.$forceUpdate()
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			navigatorTo1(id){
				console.log('***000000000000000')
				uni.navigateTo({
					url:"?goodId="+id
				})
			},	
			detail(item, e) {
				this.$emit("clickItem", item, e);
			},
			navto(item){
				// if(this.navurl == ''){
				// 	return
				// 	// 如果为空则不代替跳转
				// }else{
					// console.log(this.navurl,item.id)
					// console.log('跳转到'+ this.navurl)
					uni.navigateTo({
						url:"/page_idle/detail?goodId=" + item.id
					})
				// }
			},
		},
		}
	
</script>

<style lang="scss">
	.font_1{
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
		.font_2{
			overflow:hidden;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
		}
		.font_3{
			overflow:hidden;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:3;
		}
		.shopwidth{
			width: 43%;
		}
		.con{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.addbutton{
			background-color: red;
			color: white;
			border-radius: 50rpx;
			padding: 2rpx 14rpx;
			z-index: 99;
		}
		.tab{
			background-color: rgba(141, 198, 63, 1);
			color: white;
			padding: 0 10rpx;
			border-radius: 50rpx;
		}
		.noldmoney{
			font-size: 20rpx;
			text-decoration: line-through;
			color: #999999;
			margin-left: 10rpx;
		}
		.newmoney{
			// color: #8DC63F;
			color: #fd4f02;
			font-size: 42rpx;
			font-weight: 800;
			font-family: ui-monospace;
		}
		.introduction{
			font-size: 20rpx;
			color: #333333;
			line-height: 50rpx;
		}
		.name{
			font-size: 30rpx;
			line-height: 32px;
			color: #333333;
			margin-top: 3rpx;
		}
		.imgWrap{
			min-height: 221rpx;
			max-height: 403rpx;
			overflow: hidden;
			border-radius: 22rpx;
			width: 100%;
			padding-top: 1rpx;
			margin: 0 auto;
			image{
				width: 100%;
			    display: block;
			    margin: 0 auto;
			    height: 100%;
			    border-radius: 0rpx;
			    // margin-top: 15rpx;
		}
		}
		
		.shop{
			background-color: #FFFFFF;
			border-radius: 40rpx;
			margin-bottom: 20rpx;
			padding: 0 2rpx;
			padding-bottom: 20rpx;
		}
		.waterfall-container {    
		     /*分几列*/
		    column-count: 2;
		 }  
		 .waterfall-item {    
		     /*不留白*/
		    break-inside: avoid;
		 }
	
	
	
	.first_tab{
	    .goods_item{
	        display: flex;
	        // border-bottom: .1rpx solid #ccc;
			padding: 10rpx 0;
			width: 93%;
			margin: auto;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
	        .goods_img_wrap{
	            flex: 2;
				height: 200rpx;
	            display: flex;
				justify-content: center;
				.imgRadius{
					width: 70%;
					height: 100%;
					border-radius: 18rpx;
					display: flex;
					overflow: hidden;
					justify-content: center;
					align-items: center;
				}
	            image{
	                width: 100%;
	            } 
	        }
	        .goods_info_wrap{
	            flex: 3;
	            display: flex;
	            flex-direction:column ;
	            justify-content: space-around;
	            .goods_name{
	                display: -webkit-box;
	                width: 310rpx;
	                overflow: hidden;
	                -webkit-box-orient: vertical;
	                -webkit-line-clamp: 2;
	                text-overflow: ellipsis;
	            }
	            .goods_price{
	                color: #fd4f02;
	                font-size: 38rpx;
	            }
				.goods_createTime{
					font-size: 25rpx;
					white-space: nowrap;
				}
	        }
			.statusBut{
				flex: 1;
				display: flex;
				justify-content: left;
				align-items: center;
				image{
					width: 69%;
				}
			}
	    }
	
	}
	.content-list {
		width: 100%;
		margin: 0 19rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.goods-item {
		background-color: #ffffff;
		width: 347.5rpx;
		border-radius: 19rpx;
		margin: 0 19rpx 19rpx 0;
	}
	.goods-item image {
		width: 100%;
		// height: 308rpx;
		border-radius: 19rpx 19rpx 0 0;
	}
	.goods-item-content {
		padding: 19rpx;
	}
	.goods-little-title {
		padding: 10rpx 0;
	}
	.goods-title {
		font-weight: bold;
	}
	.goods-amount {
		display: flex;
		align-items: baseline;
	}
	.goods-amount text {
		color: #ff0000;
	}
	.goods-amount view {
		margin-left: 22rpx;
	}
	.goods-label {
		padding: 10rpx 0 0;
	}
	.gary-font {
		color: #999;
		font-size: 22rpx;
	}
	.text-line-hide {
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box ;
		-webkit-line-clamp : 2;
		-webkit-box-orient : vertical;
	}
	.text-line-hide1 {
		white-space: nowrap;
		overflow : hidden;
		text-overflow: ellipsis;
	}
</style>
